
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>用户登录</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/login-register.css" />

</head>
<body>
	<div class="header wrap1000">
		<a href=""><img src="images/logo.png" alt="" /></a>
	</div>

	<div class="main">
		<div class="login-form fr">
			<div class="form-hd">
				<h3>用户注册</h3>
			</div>
			<div class="form-bd">
				<form action="userRegister" method="post">
					<dl>
						<dt>用户名</dt>
						<dd>
							<input type="text" name="user_name" class="text" required/>
						</dd>
					</dl>
					<dl>
						<dt>密码</dt>
						<dd>
							<input type="password" name="user_pwd" class="text" id="pwd" 
							onblur="detailBlur(this)"
							required />
							<span id="pwdTips"></span>
						</dd>
					</dl>
					<dl>
						<dt>确认密码</dt>
						<dd>
							<input type="password"  class="text" id="repwd" required onblur="judegePwd(this)" />
						</dd>
					</dl>
					<dl>
						<dt>手机号</dt>
						<dd>
							<input type="tel" name="user_tel" class="text"  onblur="checkTelExists(this)"    required/>
							<span id="telTips"></span>
						</dd>
					</dl>
					<dl>
						<dt>验证码</dt>
						<dd>
							<input type="text" name="code" class="text" size="10"
								style="width: 58px;"> 
							<img src="images/code.png" alt=""
								align="absmiddle" style="position: relative; top: -2px;" /> 
							<a href="" style="color: #999;">看不清，换一张</a>
						</dd>
					</dl>
					<dl>
						<dt>&nbsp;</dt>
						<dd>
							<input type="submit" value="立即注册" class="submit" /> <input
								type="checkbox" checked="checked" />阅读并同意<a href=""
								class="forget">服务协议</a>
						</dd>
					</dl>
				</form>

			</div>
			<div class="form-ft"></div>
		</div>

		<div class="login-form-left fl">
			<dl class="func clearfix">
				<dt>注册之后您可以</dt>
				<dd class="ico05">
					<i></i>购买商品支付订单
				</dd>
				<dd class="ico01">
					<i></i>申请开店销售商品
				</dd>
				<dd class="ico03">
					<i></i>空间好友推送分享
				</dd>
				<dd class="ico02">
					<i></i>收藏商品关注店铺
				</dd>
				<dd class="ico06">
					<i></i>商品资讯服务评价
				</dd>
				<dd class="ico04">
					<i></i>安全交易诚信无忧
				</dd>
			</dl>

			<div class="if">
				<h2>如果您是本站用户</h2>
				<p>
					我已经注册过账号，立即 <a href="" class="register">登录</a> 或是 <a href=""
						class="findpwd">找回密码？</a>
				</p>
			</div>
		</div>
	</div>

	<div class="footer clear wrap1000">
		<p>
			<a href="">首页</a> | <a href="">招聘英才</a> | <a href="">广告合作</a> | <a
				href="">关于ShopCZ</a> | <a href="">联系我们</a>
		</p>
		<p>Copyright 2020-2021 wnxy Inc.,All rights reserved.</p>
	</div>
	
	<script>
		//-- 用JS来完成表单中密码格式,密码与确认密码值相同的验证
		//-- 获取表单中的input元素.根据id获取
		//var pwd = document.getElementById("pwd");
		//var repwd = document.getElementById("repwd");
	
		function detailBlur(input){
			//alert(input.value);
			//验证密码是否符合规则 利用JS来操作正则表达式
			//-- 声明一个正则表达式对象
			let reg = new RegExp("^[A-Z][\\w]{7,15}"); 
　　			let result = reg.test(input.value);
　　			var pwdTips = document.getElementById("pwdTips");
　　			if (!result) {
　　				pwdTips.innerText = "Fail";
　　				pwdTips.style.color="red";
			}else{
				pwdTips.innerText = "OK";
　　				pwdTips.style.color="green";
			}
		}
		
		//-- 判断密码和确认密码是否一致!
		function judegePwd(input){
			var pwd = document.getElementById("pwd").value;
			var repwd = input.value;
			if (pwd != repwd) {
				//alert("确认密码和密码不一致!");
			}
		}
		
		//-- 页面不可以跳转但是手机号要验证还要局部刷新显示结果  首选Ajax
		function checkTelExists(input){
			//-- 创建一个对象
			var xmlhttp;
			if (window.XMLHttpRequest){
			    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			    xmlhttp=new XMLHttpRequest();
			}else{
			    // IE6, IE5 浏览器执行代码
			    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			//-- 打开一个链接
			xmlhttp.open("GET","checkTelExists?user_tel="+input.value,true);
			
			//-- 发送消息
			xmlhttp.send();
			
			//-- 监听响应 挡状态发生改变时调用函数function
			xmlhttp.onreadystatechange=function(){
				//-- 代表响应成功! 判断装态变成什么样!
			    if (xmlhttp.readyState==4 && xmlhttp.status==200){
			    	//-- xmlhttp.responseText是响应的结果
			        //console.log(xmlhttp.responseText);
			    	if(xmlhttp.responseText == "OK")
			    		document.getElementById("telTips").innerText = "重复";
			    	else
			    		document.getElementById("telTips").innerText = "可用";
			    }
			}


		}
		
	</script>
	

</body>
</html>
